import React from "react";
import "./title.scss";
import { Menu, Badge } from "antd";
import {
  GithubFilled,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons";

const { SubMenu } = Menu;
export default function Title(props) {
  function btnClick(val) {
    props.collapsedClick(val)
  }
  function handleClick({ key }) {}
  return (
    <div className="home-title">
      <div className="left">
        {
          !props.collapsed
          ?<MenuFoldOutlined onClick={()=>{btnClick(true)}} style={{fontSize: '26px',color: '#fff'}} />
          :<MenuUnfoldOutlined onClick={()=>{btnClick(false)}} style={{fontSize: '26px',color: '#fff'}} />
        }
      </div>
      <div className="right">
        <Menu onClick={handleClick} mode="horizontal" theme="dark">
          <Menu.Item  key="1">
            <Badge count={5} size="small">
              <GithubFilled style={{ fontSize: "20px", color: "#fff" }} />
            </Badge>
          </Menu.Item>
          <SubMenu key="2" title="登录人名" popupOffset={[-38,2]}>
            <Menu.Item key="outLogin">退出登录</Menu.Item>
            <Menu.Item key="modifyPwd">修改密码</Menu.Item>
          </SubMenu>
        </Menu>
      </div>
    </div>
  );
}
